<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <p>连接状态:<span id="status">未连接</span></p>
    <p>对话:<span id="message"></span></p>
    <p><input id="input"></p>
    <button id="submitButton">提交</button>
    <button id="relinkButton">重新连接</button>
    
</body>


<script>
    let status = document.getElementById("status")

    function connectWS(){
        websocket = new WebSocket("ws://127.0.0.1:7860/chat/zhipu")
        websocket.addEventListener("open", (event)=>{
            status.innerText = "已连接"
        })
        websocket.addEventListener("error", (event)=>{
            status.innerText = "已失败"
        })
        websocket.addEventListener("close", (event)=>{
            status.innerText = "已断开"
        })
        websocket.addEventListener("message", (event)=>{
            message.innerText += event.data
        })
    }

    connectWS()

    function send_text(){
        message.innerText += "\n" + "user:" + input.value + "\n" + "assistant:"
        websocket.send(input.value)
        input.value = ""
    }

    submitButton.addEventListener("click", ()=>{
        send_text()
    })

    function handleEnterKey(event) {
    // 检查按下的键是否是回车键（键码为13）
        if (event.keyCode === 13) {
            // 执行你想要的操作
            send_text()
        }
    }

    // 当文档加载完毕时，给输入框添加键盘事件监听器
    document.addEventListener('DOMContentLoaded', function() {
        var inputField = document.getElementById('message');
        inputField.onkeydown = handleEnterKey;
    });

    relinkButton.addEventListener("click", ()=>{
        connectWS()
        console.log("已重连")
    })
</script>    


</html>